<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
</head>
<body>

<div id="app1">
    <input v-model="question">
    <p>{{answer}}</p>
</div>

<div id="app2">
    <div class="static" :class="{ active: isActive, 'text-danger': hasError }">
        #######################
    </div>
    <div class="static" :class="vueClass">
        #######################
    </div>
    <div class="static" :class="vueClass2">
        #######################
    </div>

</div>

<hr>
<div id="app3">
    <my-component></my-component>
</div>

<hr>

<div id="app4">
    <input v-model="activeColor">
    <input v-model="fontSize">
    <div :style="{color:activeColor, fontSize: fontSize+'px'}">
        阿萨德分割后
    </div>
    <div :style="div2Style">阿萨德</div>
    <div :style="div3Style">爱仕达</div>
</div>


<script type="text/javascript">

    var app1 = new Vue({
        el: "#app1",
        data: {
            question: "",
            answer: "i cannot give you an answer until you ask question."
        },
        watch: {
            question: function (question) {
                this.answer = "waiting for you to stop typing...";
                this.getAnswer();
            }
        },
        methods: {
            getAnswer: _.debounce(function () {
                if (this.question.indexOf("?") === -1) {
                    this.answer = "questions usually contains a question mark.";
                    return;
                }
                this.answer = "thinking...";
                var vm = this;
                axios.get("https://yesno.wtf//api")
                    .then(function (response) {
                        vm.answer = _.capitalize(response.data.answer);
                    })
                    .catch(function (exception) {
                        vm.answer = "Error! cound not reach the api. " + exception;
                    });
            }, 500)
        }


    });

    var app2 = new Vue({
        el: "#app2",
        data: {
            isActive: true,
            hasError: false,
            vueClass: {
                active: true,
                'text-danger': true
            }
        },
        computed: {
            vueClass2: function () {
                return {active: this.isActive, 'text-danger': this.hasError};
            }
        }

    });

    Vue.component('my-component', {
        template: '<p class="foo bar">Hi</p>'
    });

    var app3 = new Vue({
        el: "#app3"
    });

    var app4 = new Vue({
        el: "#app4",
        data: {
            activeColor: "red",
            fontSize: 40,
            div2Style: {color: 'green', fontSize: '30px'}
        },
        computed: {
            div3Style: function () {
                return {color:this.activeColor, fontSize: this.fontSize + 'px'};
            }
        }
    });

</script>


</body>
</html>